<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="/css/project.css">
    </head>
    <body>

        <div>大家好</div>
        <a href="/html/detail.html">详情页</a>

        <button id="get">get请求</button>
        
        <h2>大哥表</h2>
        <table id="fit">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>

            
        </table>

        <h2>小弟表</h2>
        <table id="xiaodi">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            
            
        </table>

    </body>
</html>
<script>
    
    var getBtn = document.getElementById('get');


    getBtn.onclick = function() {

        var myUrl = "http://localhost:8080/api?action=getFitList";
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {
                var data = JSON.parse(this.responseText);
                showData(data);
            }

        };

        // 第一个参数: 是请求方法 GET, POST
        // 第二个参数: url
        // 第三个参数: 是否是异步, 默认是异步, 如果写成false就是同步
        xhr.open("GET", myUrl);
        // 请求头
        xhr.setRequestHeader("Content-Type", "text/plain");
        // 开始发送
        // send方法可以发送请求主体, get方法中不需要传内容
        xhr.send();

    };


    function showData(data) {
        if (data.code == 0) {

            var table = document.getElementById('fit');

            console.log(table.children);

            // 清空之前的数据
            for (var i = table.children.length - 1; i > 0; i--) {
                // 删除元素
                table.children[i].remove();
            }

            var list = data.list;

            for (var i = 0; i < list.length; i++) {
                var item = list[i];

                // 创建tr
                var tr = document.createElement('tr');

                // 创建id td
                var td_id = document.createElement('td');
                td_id.innerHTML = item.id;

                // 创建name td
                var td_name = document.createElement('td');
                var span = document.createElement('span');
                span.innerHTML = item.name;
                td_name.appendChild(span);
                // 创建age td 
                var td_age = document.createElement('td');
                td_age.innerHTML = item.age;

                // 创建gender td
                var td_gender = document.createElement('td');
                td_gender.innerHTML = item.gender;

                tr.appendChild(td_id);
                tr.appendChild(td_name);
                tr.appendChild(td_gender);
                tr.appendChild(td_age);

                (function(id) {
                    td_name.onclick = function() {
                        getXiaoDi(id);
                    };
                })(item.id);
                

                document.getElementById('fit').appendChild(tr);
            }


        }
        alert(data.msg);

    }

    function getXiaoDi(id) {

        var myUrl = "http://localhost:8080/api?action=getXiaoDi&fitId=" + id;
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {
                var data = JSON.parse(this.responseText);
                console.log(data);
                showXiaoDi(data);
            }

        };

        // 第一个参数: 是请求方法 GET, POST
        // 第二个参数: url
        // 第三个参数: 是否是异步, 默认是异步, 如果写成false就是同步
        xhr.open("GET", myUrl);
        // 请求头
        xhr.setRequestHeader("Content-Type", "text/plain");
        // 开始发送
        // send方法可以发送请求主体, get方法中不需要传内容
        xhr.send();


    }

    function showXiaoDi(data) {
        if (data.code == 0) {

            var table = document.getElementById('xiaodi');

            console.log(table.children);

            // 清空之前的数据
            for (var i = table.children.length - 1; i > 0; i--) {
                // 删除元素
                table.children[i].remove();
            }

            var list = data.list;

            for (var i = 0; i < list.length; i++) {
                var item = list[i];

                // 创建tr
                var tr = document.createElement('tr');

                // 创建id td
                var td_id = document.createElement('td');
                td_id.innerHTML = item.id;

                // 创建name td
                var td_name = document.createElement('td');
                var span = document.createElement('span');
                span.innerHTML = item.name;
                td_name.appendChild(span);
                // 创建age td 
                var td_age = document.createElement('td');
                td_age.innerHTML = item.age;

                // 创建gender td
                var td_gender = document.createElement('td');
                td_gender.innerHTML = item.gender;

                tr.appendChild(td_id);
                tr.appendChild(td_name);
                tr.appendChild(td_gender);
                tr.appendChild(td_age);
                

                document.getElementById('xiaodi').appendChild(tr);
            }


        }
        alert(data.msg);

    }


    // json
    // [1, 2, 3]
    // { "name": "歪哥", age: 20, list: [{}, {}, {}]}

    // { "students" : [{"name": "小明", "age": 20}, {"name": "小刚", "age": 20}]}]}

    // xml
    // <students>
    //     <student>
    //         <name>小明</name>
    //         <age>20</age>
    //     </student>
    //     <student>
    //         <name>小刚</name>
    //         <age>22</age>
    //     </student>
    // </students>

    // for (var i = 0; i < 10; i++) {
    //     (function(i) {
    //         setTimeout(function() {
    //             console.log(i);

    //         });
    //     })(i);    
    // }



</script>